<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div flex="dir:top cross:center">
                <div class="userBg" flex="main:center cross:center">
                    <img :src="student.photoUrl+'?imageView2/0/w/80/format/jpeg'"/>
                </div>
                <div class="font12 Medium" v-text="student.studentName"></div>
            </div>
            <div flex="main:justify cross:center" class="elTitle">
                <div class="font13">本阶段表现</div>
                <div class="font10 opacity5"
                     v-text="$util.changeDate(growthNotes.thisStageBeginTime)+'-'+$util.changeDate(growthNotes.thisStageEndTime)"></div>
            </div>
            <div class="newTitle font12" v-if="growthNotes.title" v-text="growthNotes.title"></div>
            <div class="content font12" v-html="growthNotes.thisStageDetail"></div>
            <ul class="audioList" v-if="thisAudioList&&thisAudioList.length>0">
                <li class="audioItem" v-for="(audioItem,audioIndex) in thisAudioList">
                    <audio-player :url="audioItem.imgUrl" :time="audioItem.time" :audioId="audioItem.imgUrl" ref="audio"
                                  @closeAllAudio="closeAllAudio"></audio-player>
                </li>
            </ul>
            <div class="swiper-container" v-if="thisStagePices&&thisStagePices.length>1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(slide,index) in thisStagePices" @click.stop="clientSwiper(thisStagePices,index)">
                        <img v-lazy="slide.imgUrl+'?imageView2/0/w/622/format/jpeg'" v-if="slide.type==1" class="picesItem"/>
                        <img v-lazy="slide.imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="slide.type==3"  class="picesItem"/>
                        <img src="../../images/play.png" class="play" v-if="slide.type==3"/>
                    </div>
                </div>
            </div>
            <div class="oneImgBg" v-if="thisStagePices&&thisStagePices.length==1" @click.stop="clientSwiper(thisStagePices,0)">
                <img v-lazy="thisStagePices[0].imgUrl+'?imageView2/0/w/622/format/jpeg'" v-if="thisStagePices[0].type==1"/>
                <img v-lazy="thisStagePices[0].imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="thisStagePices[0].type==3"  class="picesItem"/>
                <img src="../../images/play.png" class="play" v-if="thisStagePices[0].type==3"/>
            </div>
            <div flex="cross:center" class="starWrap">
                <div class="showStar font13 Medium">本阶段评分</div>
                <ul class="starList" flex>
                    <li v-for="(star,index) in growthNotes.thisStageGrade"></li>
                </ul>
            </div>
            <div class="line"></div>
            <div flex="main:justify cross:center" class="elTitle">
                <div class="font13" >下阶段目标</div>
                <div class="font10 opacity5"
                     v-text="$util.changeDate(growthNotes.nextStageBeginTime)+'-'+$util.changeDate(growthNotes.nextStageEndTime)"></div>
            </div>
            <ul class="goalList">
                <li class="font12" flex="main:center cross:center" v-for="(goal,index) in targetList"
                    v-html="goal.tagName"></li>
            </ul>
            <div class="elItem">
                <div class="font13 elItemTitle">下阶段计划</div>
                <div class="font12" v-html="growthNotes.nextStageDetail"></div>
            </div>
            <ul class="audioList" v-if="nextAudioList&&nextAudioList.length>0">
                <li class="audioItem" v-for="(audioItem,audioIndex) in nextAudioList">
                    <audio-player :url="audioItem.imgUrl" :time="audioItem.time" :audioId="audioItem.imgUrl" ref="audio"
                                  @closeAllAudio="closeAllAudio"></audio-player>
                </li>
            </ul>
            <div class="swiper-container" v-if="nextStagePices&&nextStagePices.length>1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(slide,index) in nextStagePices" @click.stop="clientSwiper(nextStagePices,index)">
                        <img v-lazy="slide.imgUrl+'?imageView2/0/w/622/format/jpeg'" v-if="slide.type==1" class="picesItem"/>
                        <img v-lazy="slide.imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="slide.type==3"  class="picesItem"/>
                        <img src="../../images/play.png" class="play" v-if="slide.type==3"/>
                    </div>
                </div>
            </div>
            <div class="oneImgBg" v-if="nextStagePices&&nextStagePices.length==1" @click.stop="clientSwiper(nextStagePices,0)">
                <img v-lazy="nextStagePices[0].imgUrl+'?imageView2/0/w/622/format/jpeg'" v-if="nextStagePices[0].type==1"/>
                <img v-lazy="nextStagePices[0].imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="nextStagePices[0].type==3"  class="picesItem"/>
                <img src="../../images/play.png" class="play" v-if="nextStagePices[0].type==3"/>
            </div>

            <div class="elItem">
                <div class="font13 elItemTitle">给家长建议</div>
                <div class="font12" v-html="growthNotes.suggest"></div>
            </div>
            <ul class="audioList" v-if="suggestAudio&&suggestAudio.length>0">
                <li class="audioItem" v-for="(audioItem,audioIndex) in suggestAudio">
                    <audio-player :url="audioItem.imgUrl" :time="audioItem.time" :audioId="audioItem.imgUrl" ref="audio"
                                  @closeAllAudio="closeAllAudio"></audio-player>
                </li>
            </ul>
            <div class="swiper-container" v-if="suggestPices&&suggestPices.length>1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(slide,index) in suggestPices" @click.stop="clientSwiper(suggestPices,index)">
                        <img v-lazy="slide.imgUrl+'?imageView2/0/w/622/format/jpeg'" v-if="slide.type==1" class="picesItem"/>
                        <img v-lazy="slide.imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="slide.type==3"  class="picesItem"/>
                        <img src="../../images/play.png" class="play" v-if="slide.type==3"/>
                    </div>
                </div>
            </div>
            <div class="oneImgBg" v-if="suggestPices&&suggestPices.length==1" @click.stop="clientSwiper(suggestPices,0)">
                <img v-lazy="suggestPices[0].imgUrl+'?imageView2/0/w/622/format/jpeg'" v-if="suggestPices[0].type==1"/>
                <img v-lazy="suggestPices[0].imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="suggestPices[0].type==3"  class="picesItem"/>
                <img src="../../images/play.png" class="play" v-if="suggestPices[0].type==3"/>
            </div>
            <div class="line"></div>
            <commentList :text="'回复 '" ref="commentMethod" :commentObj="rs" :type="'APP_GROWTH_NOTE'" :index="0" :classId="classId"  v-if="rs&&commentList"></commentList>
            <shareModel :appName="'成长手记'" :appCode="'APP_GROWTH_NOTE'"  :shareUrl="shareUrl" :role="role" :id="'&appId='+appId" :imgUrl="thisStagePices.length>0?thisStagePices[0].type==1?thisStagePices[0].imgUrl:thisStagePices[0].imgUrl+'?vframe/jpeg/offset/1/w/80':''"></shareModel>
            <div class="setComment" flex="cross:center main:center" @click="setComment()">评论</div>
        </div>
    </div>
</template>
<script type="text/babel">
    import API from '../../../api/api.js'
    import {imagedomain, domain} from '../../../api/api.js'
    import audioPlayer from '../../../components/audioComponent.vue'
    import shareModel from '../../../components/shareModel.vue'
    import commentList from '../../../components/commentList_header.vue'
    const api = new API();
    import '../../../vendor/js/swiper.min.js'
    export default{
        data(){
            return {
                role: this.$route.query.role ? this.$route.query.role : '',
                classId: this.$route.query.classId ? this.$route.query.classId : '',
                appId: this.$route.query.appId ? this.$route.query.appId : this.$route.query.tid,
                growthNotes: '',
                targetList: [],
                thisStagePices: [],
                nextStagePices: [],
                suggestPices:[],
                thisAudioList: [],
                nextAudioList: [],
                suggestAudio:[],
                commentList:[],
                student:'',
                shareUrl:'',
                rs:''
            }
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction',this.closeWebView);
            this.$nextTick(function () {
                this.getGrowthDetail();
                setTimeout(()=>{
                    this.propsTitle();
                },300)
            })
        },
        components: {
            audioPlayer,
            shareModel,
            commentList
        },
        methods: {
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '成长手记',
                }, (res) => {
                })
            },
            closeAllAudio(){
                this.$refs.audio.forEach((el, elIndex) => {
                    this.$refs.audio[elIndex].closeAudio();
                });
            },
            closeWebView(){
                this.$util.JsBridge('closeWebView', {}, ()=> {})
                this.$util.JsBridge('refreshAppCellInfo',{},()=>{})
            },
            getGrowthDetail(){
                let param = {
                    tid: this.appId
                };
                api.getGrowthDetail(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.rs=rs;
                        this.commentList=rs.commentList;
                        this.growthNotes = rs.growthNotes;
                        this.targetList = rs.targetList;
                        this.shareUrl=rs.shareUrl;
                        if(rs.student.photoUrl===''){
                            rs.student.photoUrl=this.$util.getDefaultHeader(rs.student.studentId)
                        }
                        this.student=rs.student;
                        rs.thisStagePices.map((el) => {
                            if (el.type == 2) {
                                this.thisAudioList.push(el);
                            } else {
                                this.thisStagePices.push(el);
                            }
                        });
                        rs.nextStagePices.map((el) => {
                            if (el.type == 2) {
                                this.nextAudioList.push(el);
                            } else {
                                this.nextStagePices.push(el);
                            }
                        });
                        rs.suggestPices.map((el) => {
                            if (el.type == 2) {
                                this.suggestAudio.push(el);
                            } else {
                                this.suggestPices.push(el);
                            }
                        });
                        this.$nextTick(function () {
                            new Swiper('.swiper-container', {
                                slidesPerView: 1.2,
                                spaceBetween: 8,
                                observer: true,
                                observeParents: true,
                            });
                            document.documentElement.scrollTop=1;
                            document.body.scrollTop=1;
                        })
                    }else{
                        this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/detail',api:'getGrowthDetail',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/detail',api:'getGrowthDetail',success:false,data:'网络异常'}));
                });
            },
            setComment(){
                this.$util.JsBridge('setComment', {
                        limit: 500,
                        placeHolder: '请输入500字以内评论'
                    }, (result) => {
                        let data = {};
                        if (result.content === '') {
                            this.$toast('评论内容不能为空')
                        } else {
                            data.type = result.type;
                            if (data.type == 2) {
                                data.time = result.time;
                            }
                            data.content = this.$util.utf16toEntities(result.content)
                            const param = {
                                classId: this.classId,
                                type:data.type,
                                appId: this.appId,
                                content: data.content,
                                appCode: 'APP_GROWTH_NOTE'
                            }
                            if (result.type == 2) {
                                param.time = result.time;
                            }
                            let response = api.setComment(param);
                            response.then((res) => {
                                let {code, rs} = res;
                                if (code === 200) {
                                    this.$refs.commentMethod.sonSetComment(rs);
                                }else{
                                    this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/detail',api:'setComment',success:false,data:res}));
                                }
                            }).catch(()=>{
                                this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/detail',api:'setComment',success:false,data:'网络异常'}));
                            })
                        }
                    }
                )
            },
            clientSwiper(pices, index){
                let arr = Array.prototype.toString.call(pices) === '[object String]' ? JSON.parse(JSON.stringify(JSON.parse(pices))) : JSON.parse(JSON.stringify(pices))
                arr.forEach(function (e) {
                    if (e.type == 3) {
                        e.coverUrl =   e.imgUrl + '?vframe/jpeg/offset/1';
                    }
                });
                this.$util.JsBridge('picesSwiper', {
                    picesList: arr,
                    picesIndex: index
                }, (res) => {
                })
            },
        }
    }
</script>
<style scoped lang="scss">
    .audioList {
        padding-top: 0.12rem;
        .audioItem {
            padding-bottom: 0.08rem;
            padding-left: 0.08rem;
        }
        .audioItem:nth-last-child(1) {
            padding-bottom: 0;
        }
    }

    .container {
        width: 100%;
        height: 100%;
        background: #000;
        position: relative;
    }
    .oneImgBg{
        padding:0 0.12rem;
        margin-top:0.12rem;
        width:100%;
        height:2rem;
        overflow: hidden;
        position: relative;
        img{
            width:100%;
            height:100%;
            object-fit: cover;
        }
    }
    .userBg {
        background: url("../../images/photoBg.png") 0 0 no-repeat;
        background-size: 0.5rem 0.5rem;
        width: 0.5rem;
        height: 0.5rem;
        margin-top: 0.2rem;
        margin-bottom: 0.12rem;
        img {
            width: 0.45rem;
            height: 0.45rem;
            border-radius: 100%;
        }
    }

    .elTitle {
        padding: 0 0.12rem;
        margin-top: 0.15rem;
    }
    .newTitle{
        padding: 0.08rem 0.12rem;
    }
    .content {
        margin-top: 0.08rem;
        padding: 0 0.12rem;
    }

    .swiper-container {
        margin-top: 0.12rem;
    }

    .swiper-slide {
        height: 2rem;
        overflow: hidden;
        background: #d8d8d8;
        .picesItem {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .line {
        margin-top:0.2rem;
        background: rgba(255, 255, 255, .2);
        height: 1px;
    }

    .starWrap {
        padding: 0.15rem 0;
    }

    .showStar {
        padding: 0 0.12rem;
    }

    .starList {
        li {
            background: url("../../images/yellowStar.png") 0 0 no-repeat;
            background-size: 0.16rem 0.16rem;
            width: 0.16rem;
            height: 0.16rem;
            padding: 0 0.12rem;
        }
    }

    .goalList {
        padding: 0 0.12rem;
        overflow: hidden;
        li {
            background: rgba(0, 0, 0, .5);
            border-radius: 0.06rem;
            padding: 0 0.12rem;
            height: 0.27rem;
            float: left;
            margin-right: 0.08rem;
            margin-top: 0.08rem;
        }
    }

    .elItem {
        margin: 0.2rem 0.12rem;
        .elItemTitle{
            display: block;
            margin-bottom: 0.08rem;
        }
    }
    .setComment{
        background: rgba(0, 0, 0, .8);
        border-radius: 0.06rem;
        width: 1.8rem;
        height: 0.36rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0.24rem;
        font-size: 0.13rem;
        color: #ffffff;
        margin: auto;
        z-index: 9999;
    }
</style>